<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>
<div >
    <el-form :inline="true" :model="formInline" class="demo-form-inline" id="app">
        <div v-for="(item,index) in formInline">
            <el-form-item :label="'属性' +(index +1)">
                <el-input v-model="item.attr" placeholder="属性"></el-input>

                </el-select>

            </el-form-item>
            <el-form-item :label="'属性值' +(index +1)">
                <el-input v-model="item.attr_value" placeholder="属性值"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" @click=" deletform(index)">移除</el-button>
            </el-form-item>

        </div>
        <div>
            <el-form-item>
                <el-button type="defaul" @click="addform">增加</el-button>
            </el-form-item>
        </div>
        <div>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
        </div>
    </el-form>
</div>

</body>

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    v = new Vue({
        el: '#app',
        data:{
            goodsId:"{$goods_id}",
            option:[],
            formInline:[ {
                attr_value: '',
                attr: ''
            }]
        },
        methods: {
            addform() {
                this.formInline.push({
                    attr_value: '',
                    attr: ''
                })
            },
            deletform(index) {
                this.formInline.splice(index,1)

            },
            onSubmit(){
                $.ajax({
                    url: "{:url('Goods/GoodsDetailattrPost')}",
                    type:'POST',
                    data: {
                        from:this.formInline,
                        goods_id:this.goodsId,
                    },
                    success(res){
                        alert('请求成功');

                    },
                    error(){
                        alert('请求失败');
                    }
                })
            }
        },
        created(){
            $.ajax({
                url: "{:url('Goods/GoodsDetailattradd')}",

                data: {
                    goods_id:this.goodsId,
                },
                success(res){

                    v.option = res.data
                },
                error(){
                    alert('请求失败');
                }
            })
        }
    })
</script>

</html>